<!-- 左右结构，左边是菜单栏、右边是一个大盒子分为通用顶部（上）和变换的主体（下） -->
<template>
  <el-container>
    <Aside :asideWidth="asideWidth" :isCollapse="isCollapses" />
    <div style="width: 100%;flex-wrap: wrap;">
      <Header :collapseIcon="collapseIcon" :handleCollapse="handleCollapse" />
      <TagsView></TagsView>
      <el-main>
        <router-view /> <!-- 表示当前页面的子路由会在<router-view />里面展示      -->
      </el-main>
    </div>
  </el-container>
</template>

<script>
  import { mapState } from 'vuex';
  import Aside from '../components/Aside.vue';
  import Header from '../components/Header.vue';
  import TagsView from '../components/TagsView.vue';
  export default {
    components: {
      Aside,
      Header,
      TagsView
    },
    data() {
      return {
        isCollapses: false,   //展开
        asideWidth: '200px',   //侧边栏默认值为200
        collapseIcon: 'el-icon-s-fold'   //展开图标箭头向左
      };
    },
    methods: {
      handleCollapse() {
        this.isCollapses = !this.isCollapses;
        if (this.isCollapses) {     //折叠图标
          this.asideWidth = '64px';
          this.collapseIcon = 'el-icon-s-unfold';
        } else {
          this.asideWidth = '200px';    //展开图标
          this.collapseIcon = 'el-icon-s-fold';
        }
      },

    },
    computed: {
      //引入vuex中state的变量，可以直接this.xxx调用到
      ...mapState(["isCollapse"]),
    },
    watch: {
      //监听vuex中的变量如果变动了就赋值，从而改变菜单栏缩小展开
      isCollapse() {
        if (this.isCollapse) {
          this.subwidth = '64px'
        } else {
          this.subwidth = '200px'
        }
      }
    }

  };
</script>